<template>
  <div class="home">
    <div class="header-wrap w-1300">
      <div class="header">
        <div class="left">
          <img class="logo" src="../../assets/images/logo.png" alt="logo">
        </div>
        <div class="right">
          <img class="name" src="../../assets/images/name.svg" alt="name">
        </div>
      </div>
    </div>
    <div class="row-box">
      <div class="header-bar w-1300">
        <div class="left">当前位置：{{menu[current].name}}</div>
        <div class="right">
          <span>你好，</span>
          <el-dropdown trigger="click">
            <span>{{userName}}，{{department}}<i class="el-icon-arrow-down el-icon--right"></i></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handleLogout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="main-content w-1300">
      <div class="content-left">
        <div :class="['menu-item', {'active': current === index}]"
            v-for="(item, index) in menu"
            :key="item.id"
            @click="selectMenu(index)"
        >
          <img class="icon-menu" v-if="current === index" src="../../assets/images/icon-menu-white.svg">
          <img class="icon-menu" v-else src="../../assets/images/icon-menu-blue.svg">
          <span>{{item.name}}</span>
        </div>
      </div>
      <div class="content-right">
        <router-view></router-view>
      </div>
    </div>
    <xz-footer></xz-footer>
  </div>
</template>

<script>
import { getStore } from '@/utils/storage'
import XzFooter from '@/components/xz-footer'
import { setStore } from '../../utils/storage'

export default {
  name: 'home',
  components: {
    XzFooter
  },
  data () {
    return {
      current: 0,
      menu: [
        { id: '1', name: '登记卡办理' },
        { id: '2', name: '登记记录' },
        { id: '3', name: '临期提醒记录' }
      ],
      userName: '',
      department: ''
    }
  },
  watch: {
    '$route.path' (path) {
      this.changeCurrent(path)
    }
  },
  created () {
    let path = this.$route.path
    this.changeCurrent(path)
    this.getDicData('all')
    this.queryUserInfo()
  },
  methods: {
    changeCurrent (path) {
      if (path.indexOf('/record') === 0) {
        this.current = 1
      } else if (path.indexOf('/linqi') === 0) {
        this.current = 2
      } else {
        this.current = 0
      }
    },
    // 查询用户信息
    async queryUserInfo () {
      let params = {
        userId: getStore('userId')
      }
      let res = await this.$http(this.$api.userInfo, params)
      if (res.code === 200) {
        let group = res.data.userGroupRefViews
        this.userName = res.data.nameCn
        this.department = group && group.length ? group[0].groupName : ''
        let groupCode = group && group.length ? group[0].code : ''
        setStore('groupCode', groupCode)
      }
    },
    selectMenu (index) {
      this.current = index
      this.$router.push({
        path: index === 1 ? '/record' : index === 2 ? '/linqi' : '/'
      })
    },
    // 加载字典
    async getDicData (type) {
      let params = {
        url: `${this.$api.getDictionary.url}/${type}/load`,
        method: 'get'
      }
      let res = await this.$http(params)
      if (res.code === 200) {
        setStore('dictionary', res.data)
      }
    },
    // 退出登录
    handleLogout () {
      this.$messagebox.confirm('您确定退出该系统吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.clear()
        this.$router.push({path: '/login'})
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .home {
    width: 100%;
    height: 100%;
    background: url("../../assets/images/bg.png") no-repeat;
    background-size: cover;
    position: relative;
    .header-wrap {
      padding-top: 40px;
      .header {
        width: 700px;
        display: flex;
        align-items: center;
        .left {
          width: 73px;
          height: 76px;
          .logo {
            width: 100%;
            height: 100%;
          }
        }
        .right {
          padding-left: 18px;
          .name {
            width: 572px;
            height: 69px;
          }
        }
      }
    }
    .row-box {
      margin-top: 13px;
      width: 100%;
      height: 50px;
      line-height: 50px;
      background-color: #02579A;
      .header-bar {
        display: flex;
        justify-content: space-between;
        color: #fff;
        font-size: 14px;
        .right {
          /deep/ .el-dropdown {
            color: #fff;
            cursor: pointer;
          }
        }
      }
    }
    .main-content {
      height: 780px;
      display: flex;
      flex-direction: row;
      .content-left {
        margin-right: 10px;
        padding: 20px 10px;
        box-sizing: border-box;
        width: 198px;
        height: 100%;
        background-color: #fff;
        .menu-item {
          margin-top: 20px;
          padding: 22px 0 22px 40px;
          background-color: #EBF4FB;
          color: #02579A;
          font-size: 14px;
          font-weight: 400;
          display: flex;
          flex-direction: row;
          cursor: default;
          .icon-menu {
            margin-right: 13px;
            width: 16px;
            height: 16px;
          }
          &.active {
            background-color: #02579A;
            color: #fff;
          }
        }
      }
      .content-right {
        flex: 1;
        background-color: #fff;
        height: 100%;
        overflow-y: auto;
      }
    }
  }
</style>
